<template>
  <div class="pt15">
    <el-card class="bg-card">
      <!-- 头部导航 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 用户管理 -->
        <el-tab-pane name="first">
          <span slot="label">
            <el-badge :value="recruitCount" v-if="recruitCount > 0">
              招聘信息
            </el-badge>
            <span v-else>招聘信息</span>
          </span>

          <recruit @alreadyRead="alreadyRead" />
        </el-tab-pane>
        <!-- / 用户管理 -->
<!-- 
        <el-tab-pane name="second">
          <span slot="label">
            <el-badge :value="newCount" v-if="newCount > 0">
              系统通知
            </el-badge>
            <span v-else>系统通知</span>
          </span>
          <div v-if="!noData" class="lists">
          </div>

          <no-data v-if="noData" class="mb30" />
          <pagination
            v-show="total > 0"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            :page.sync="listQuery.pageNo"
            :limit.sync="listQuery.pageSize"
            @pagination="getList"
          />
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import recruit from "./components/recruit";
import {
  sysList,
  leavingNewsDelete,
  leavingNewsAdd,
  leavingNewsCount,
  enMessageCount,
} from "@/api/article";
import noData from "@/components/noData";
export default {
  components: { Pagination, noData, recruit },
  directives: { waves },
  // 私有数据
  data() {
    return {
      activeName: "first", // 头部导航默认
      total: 0,
      recruitCount: 0,
      newCount: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 20,
      },
      list: [],
      visible: false, // 弹出框显示与隐藏
      reply: "", // 回复内容输入框--数据
    };
  },
  computed: {
    noData() {
      return this.list.length === 0 && this.listQuery.pageNo === 1;
    },
  },
  created() {
    this.getList();
    enMessageCount().then((res) => {
      this.recruitCount = res.result;
    });
    // leavingNewsCount().then((res) => {
    //   this.newCount = res.result;
    // });
  },
  // 事件处理
  methods: {
    alreadyRead() {
      this.recruitCount--;
    },
    getList() {
      this.listLoading = true;
      sysList(this.listQuery).then((response) => {
        this.list = response.result.records;
        this.total = response.result.total;
        this.listLoading = false;
      });
    },
    handleClick() {},
    delItem(id) {
      this.$confirm("确定要删除此留言吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          leavingNewsDelete({ id: id }).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  border-bottom: 1px solid #f3f3f3;
}
.head-portrait {
  img {
    width: 60px;
    height: 60px;
    border-radius: 30px;
  }
}
.job-wanted {
  width: 1015px;
  line-height: 36px;
}
::v-deep .el-badge__content.is-fixed {
  top: 10px;
}
.reply-content {
  background: #f2f2f2;
  border-radius: 5px;
}
</style>
